<template>
  <view>
    <view class="m-banner">
      <image :src="recommendList.bannerPicture" class="banner"></image>
    </view>
    <view class="m-nav">
      <view
        :class="{ active: id === item.id, item }"
        v-for="item in recommendList.subTypes"
        :key="item.id"
        :data-id="item.id"
        @click="selected"
      >
        {{ item.title }}
      </view>
    </view>
    <scroll-view
      scroll-y
      class="scroll-view"
      @scrolltolower="refresh"
      :scroll-top="scrollTop"
      @scroll="scroll"
    >
      <view class="wrap">
        <navigator
          :url="`/pages/goods/index?id=${item.id}`"
          open-type="navigate"
          hover-class="navigator-hover"
          class="item"
          v-for="item in shopList"
          :key="item.id"
        >
          <image :src="item.picture" mode="scaleToFill" class="pic" />
          <view class="name">{{ item.name }}</view>
          <view class="price">￥{{ item.price }}</view>
        </navigator>
      </view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  name: 'shangpintehui',
  data () {
    return {
      recommendList: {},
      list: [],
      id: '',
      shopList: [],
      pages: {
        page: 1,
        pageSize: 10,
        subTypes: ''
      },
      subTypes: '',
      title: '',
      scrollTop: 0,
      oldScrollTop: 0
    }
  },
  onLoad (options) {
    uni.setNavigationBarTitle({
      title: options.title
    })
    this.title = options.title
    console.log(1)
    if (options.title === '特惠推荐') {
      this.getTehui()
    } else if (options.title === '爆款推荐') {
      this.getBaoKuan()
    } else if (options.title === '一站买全') {
      this.getMaiQuan()
    } else if (options.title === '领券中心') {
      this.getHaowu()
    } else if (options.title === '新鲜好物') {
      this.getHaowu()
    }
  },
  computed: {},
  methods: {
    async getTehui () {
      const res = await uni.$u.http.get('/home/preference/mutli', {
        params: this.pages
      })
      this.recommendList = res.data.result
      this.setshop(res.data.result)
    },
    async getBaoKuan () {
      const res = await uni.$u.http.get('/home/inVogue/mutli', {
        params: this.pages
      })
      this.recommendList = res.data.result
      this.setshop(res.data.result)
    },
    async getMaiQuan () {
      const res = await uni.$u.http.get('/home/oneStop/mutli', {
        params: this.pages
      })
      this.recommendList = res.data.result
      this.setshop(res.data.result)
    },
    async getHaowu () {
      const res = await uni.$u.http.get('/home/new/mutli', {
        params: this.pages
      })
      this.recommendList = res.data.result
      this.setshop(res.data.result)
    },
    setshop (arr) {
      if (this.subTypes) {
        this.id = this.subTypes
      } else {
        this.id = arr.subTypes[0].id
      }
      this.shopList.push(...arr.goodsItems[this.id].items)
      this.total = arr.goodsItems[this.id].counts
    },
    selected (e) {
      this.scrollTop = this.oldScrollTop
      this.$nextTick(() => {
        this.scrollTop = 0
      })
      this.subTypes = e.target.dataset.id
      this.id = e.target.dataset.id
      this.pages.subTypes = e.target.dataset.id
      this.shopList = []
      this.shopList.push(...this.recommendList.goodsItems[this.id].items)
      this.total = this.recommendList.goodsItems[this.id].counts
    },
    refresh () {
      if (this.shopList.length < this.total) {
        // 页面+1
        this.pages.page++
        // 重新请求下一页数据
        if (this.title === '特惠推荐') {
          this.getTehui()
        } else if (this.title === '爆款推荐') {
          this.getBaoKuan()
        } else if (this.title === '一站买全') {
          this.getMaiQuan()
        } else if (this.title === '领券中心') {
          this.getHaowu()
        } else if (this.title === '新鲜好物') {
          this.getHaowu()
        }
      } else {
        uni.showToast({
          title: '没有更多数据了',
          icon: 'none'
        })
      }
    },
    scroll (e) {
      this.oldScrollTop = e.detail.scrollTop
    }
  }
}
</script>

<style lang="scss">
.m-banner {
  width: 750rpx;
  height: 225rpx;
  border-radius: 0 0 40rpx 40rpx;
  overflow: hidden;
  .banner {
    width: 100%;
    height: 100%;
  }
}
.m-nav .item.active::before {
  content: '';
  width: 40rpx;
  height: 4rpx;
  transform: translate(-50%);
  background-color: #27ba9b;
  position: absolute;
  left: 50%;
  bottom: 24rpx;
}
.m-nav {
  width: 710rpx;
  display: flex;
  justify-content: space-evenly;
  height: 100rpx;
  line-height: 90rpx;
  margin: -40rpx 20rpx 0;
  font-size: 28rpx;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
  color: #333;
  background-color: #fff;
  position: relative;
  z-index: 9;
  .item {
    position: relative;
  }
}
.scroll-view {
  height: calc(100vh - 285rpx);
  .wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20rpx 20rpx;
    .item {
      width: 310rpx;
      padding: 20rpx;
      margin-top: 20rpx;
      border-radius: 10rpx;
      background-color: #fff;
      .pic {
        width: 305rpx;
        height: 305rpx;
      }
      .name {
        height: 88rpx;
        font-size: 26rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .price {
        line-height: 1;
        color: #cf4444;
        font-size: 30rpx;
      }
    }
  }
}
</style>
